<template>
  <div class="creat_en_vue_content">
    <Header name="组件间通讯" ref="header" />
    <span class="header3">父组件给子组件传递数据--->props</span>
    <span class="header3">父组件调用子组件方法refs</span>
    <el-button style="width: 150px" type="primary" @click="useChildMethod"
      >调用子组件方法</el-button
    >

    <ComponetsTest
      name="hello_world"
      @useParentMethod="useParentMethod"
      ref="ComponetsTest"
    />
    <span>{{ parentName }}</span>
  </div>
</template>

<script>
import ComponetsTest from "./components/ComponetsTest";

export default {
  name: "Mvvm",
  components: { ComponetsTest },

  data() {
    return {
      parentName: "parentName"
    };
  },
  methods: {
    useChildMethod() {
      this.$refs.ComponetsTest.childMethod();
    },
    useParentMethod() {
      this.$alert("调用了父组件方法", "提示", {
        confirmButtonText: "确定"
      });
    }
  },
  created() {},
  mounted() {}
};
</script>

<style scoped lang="stylus">
@import 'components/common_md_class.styl';

.creat_en_vue_content {
  display: flex;
  width: 100%;
  height: 100%;
  padding-left: 32px;
  flex-direction: column;
}

.creat_en_vue_page {
  display: flex;
  flex-direction: column;

  span {
    padding-top: 4px;
  }
}
</style>
